<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}"></head>
<body>
<div th:replace="~{/common/header::header-body}"></div>

<div class="container mt-3 text-justify-center">
    <h1 class="text-primary" th:text="${article.getTitle()}">标题</h1>
    <p th:text="${article.getContent()}">内容</p>
    <pre class="text-info" th:text="|本文创建于${#dates.format(article.getDate())}   分类:${article.getCategory()}|">信息</pre>


    <h2>评论</h2>
    <ul class="list-group">
        <li class="list-group-item" th:each="comment:${comments}">
            <p class="text-success" th:text="${comment.getContent()}">内容</p>
            <pre th:text="|评论时间${#dates.format(comment.getDate())}   作者:${comment.getAuthor()}|">信息</pre>
        </li>
    </ul>

    <form th:action="'/article/'+${article.getId()}+'/comment'" method="post">
        <div class="mb-3 mt-3">
            <label for="comment">请输入评论：</label>
            <textarea class="form-control" rows="5" id="comment" name="content" required></textarea>
        </div>
        <div class="mb-3">
            <label for="author" class="form-label">作者：</label>
            <input type="text" class="form-control" id="author" name="author" required>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>

</body>
<style>
    body {
        height: 100%;
        /*background-image: url("../../static/assets/img/index_cover.jpg");*/
        background: rgb(100, 100, 100, 0.3);
        z-index: -1;
        /*opacity: 0.5;*/
    }
    .text-primary{
        color: deeppink !important;
        font-weight: bolder;
    }
    .text-info{
        color: #812658 !important;
    }
    .h2,h2{
        font-size: calc(5.325rem + -4.1vw);
    }
    .list-group-flush>.list-group-item {
        border-width: 5px 5px 11px;
        margin: 10px;
    }
    .form-control:focus{
        color: #fff;
        background-color: #ffd8e0;
        border-color: deeppink;
        box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
    }
    .btn-primary{
        color: #fff;
        background-color: deeppink;
        border-color: white;
        margin: 10px 0 10px 0;
        width: 100%;
        border-radius: 5px;
    }
    .btn-primary:hover{
        background-color: #9f1d66;
    }
    .page-link{
        background-color: rgba(192, 88, 88, 0.15);
        border: none;
    }
    .list-group-flush>.list-group-item:last-child {
        border-bottom-width: 12px;
    }
    .list-group-item:last-child {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .card{
        /*color: black;*/
        background-color: rgb(250, 167, 189);
        border-radius: 10px;
    }

    .card-title{
        color: deeppink;
        font-size: 38px;
        font-weight: bolder;
    }
</style>
</html>

